---
type: tutorial
unitTitle: Créer et concevoir avec les composants UI d'Astro
title: 'Embarquement : Unité 3 - Composants'
description: |-
  Tutoriel : Créer votre premier blog avec Astro —
  Créez des composants Astro pour réutiliser le code des éléments communs sur votre site web
i18nReady: true
head:
  - tag: title
    content: "Tutoriel de création d'un blog : Unité 3 - Composants | Docs"
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Maintenant que vous avez des fichiers `.astro` et `.md` générant des pages entières sur votre site web, il est temps de créer et de réutiliser de plus petits morceaux d'HTML avec des composants Astro !

## Ce que la suite vous réserve

Dans cette unité, vous apprendrez à créer des **composants Astro** pour réutiliser le code des éléments communs sur votre site web.

Vous créerez :
- Un composant de navigation qui présente un menu de liens vers vos pages
- Un composant de pied de page à inclure en bas de chaque page
- Un composant de médias sociaux, utilisé dans le pied de page, qui renvoie vers des pages de profil
- Un composant interactif Menu pour afficher ou masquer la navigation sur mobile

En chemin, vous utiliserez CSS et JavaScript pour créer un design réactif qui réagit aux tailles d'écran et aux interactions de l'utilisateur.



<Box icon="check-list">
## Liste de contrôle

<Checklist>
- [ ] Je suis prêt à créer quelques composants Astro !
</Checklist>
</Box>
